<div class="deleteConfirm" *ngIf="bookData$ | async as bookData">
  <h3 mat-dialog-title>Do you want to delete this item?</h3>
  <div mat-dialog-content>
    <table class="table">
      <tbody>
        <tr>
          <td><strong>BookId</strong></td>
          <td>{{ bookData.bookId }}</td>
        </tr>
        <tr>
          <td><strong>Title</strong></td>
          <td>{{ bookData.title }}</td>
        </tr>
        <tr>
          <td><strong>Author</strong></td>
          <td>{{ bookData.author }}</td>
        </tr>
        <tr>
          <td><strong>Category</strong></td>
          <td>{{ bookData.category }}</td>
        </tr>
        <tr>
          <td><strong>Price</strong></td>
          <td>{{ bookData.price | currency : "INR" }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div mat-dialog-actions align="end">
    <button
      mat-button
      [mat-dialog-close]="1"
      mat-raised-button
      color="warn"
      tabindex="-1"
      (click)="confirmDelete()"
    >
      Delete
    </button>
    <button mat-button (click)="onNoClick()" mat-raised-button>Cancel</button>
  </div>
</div>
